<template>
  <div>
    <my-product
      v-for="(item) in list" 
      :key="item.id"
      :title="item.proname"
      :price="item.proprice"
      :id="item.id"
      @kan="kanFn"
      />
  </div>
</template>

<script>
import myProduct from './components/my-product.vue'
export default {
  components: { 
    myProduct 
  },
  data() {
    return {
      msg:'鲜嫩多汁',
      list: [
        { id: 1, proname: '超级无敌椰子鸡儿', proprice: 69 },
        { id: 2, proname: '超级无敌棒棒鸡儿', proprice: 59 },
        { id: 3, proname: '超级无敌钵钵鸡儿', proprice: 49 }
      ]
    };
  },

  mounted() {
    
  },

  methods: {
    kanFn(id){
      const p = this.list.find(item => item.id === id)
      p.proprice -= 4
    }
  },
};
</script>

<style scoped>

</style>